<template>

		<div class="ui segments m-box" >
			<div class="ui card" style="width: 100%;">
				<div class="ui card cardback m-mobile-show " style="width: 100%;height: 100%;border: none;box-shadow: none;margin-bottom: 0;">
					<div align="center" style="width: 100%;height: 65%;background-color:#17a2b8;position:absolute;box-shadow: 0px 2px 3px rgba(0,0,0,.22)!important;">
						
					</div>
					<div class="image" style="max-width:30%;margin: auto;margin-top: 8%;background-color: transparent;">
						<img :src="introduction.avatar" style="border-radius:50%">
					</div>
				</div>
				
				<div class="ui card cardback m-mobile-hide" style="width: 100%;height: 100%;border: none;box-shadow: none;margin-bottom: 0;margin-top:0 ">
					<div align="center" style="width: 100%;height: 75%;background-color:#17a2b8;position:absolute;box-shadow: 0px 2px 3px rgba(0,0,0,.22)!important;">
						<div  style="font-size:1.6rem;font-weight: 320;margin-top: 10%;margin-bottom:5%;color: white;">{{ introduction.name }}.</div>
					</div>
					<div class="image" style="max-width:30%;margin: auto;margin-top: 22%;background-color: transparent;">
						<img :src="introduction.avatar" style="border-radius:50%">
					</div>
				</div>

				<div class="content" align="center" style="border: none;">
					<div class="header m-mobile-show" style="margin-bottom: 1rem;color: #303133;">{{ introduction.name }}</div>
					<!-- 签名 -->
					<div class="" style="font-size: 1.025rem;color: #606266;">树的方向风决定，人的方向自己来决定</div>
				</div>
				<div class="extra content" align="center" style="display: flex;justify-content:center">
					<span style="margin-top: 0.579rem;color: #606266;">联系我：</span>

					<el-popover placement="top-start" title="QQ" width="200" trigger="hover" content="819508292">
						<el-button slot="reference" style="border:1px #FFFFFF solid;margin-right: 0.525rem;width: 40px;height: 40px;border-radius: 50%;background-image: url(https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/qq.jpg
);background-repeat: no-repeat;background-size: 100% 100%;"></el-button>
					</el-popover>
					

					<!-- 微信 -->

					<!-- <el-image style="margin-top: 0.45rem;width: 32px;height: 28px;" :src="url"
						 :preview-src-list="srcList">
						</el-image>
					-->
					<!-- <el-button 
						plain 
						@click="open" 
						style="border:1px #FFFFFF solid;margin-right: 0.525rem;width: 40px;height: 40px;border-radius: 50%;background-image: url(/img/wx.jpg);background-repeat: no-repeat;background-size: 100% 100%;">
					</el-button> -->
<!-- 					<el-button showConfirmButton="false"
					 type="text" @click="open"
					style="margin-top: 0.35rem;margin-left: 0.225rem;width: 2.4875rem;height: 2.2875rem;border-radius: 50%;background-image: url(/img/wx.jpg);background-repeat: no-repeat;background-size: 100% 100%;"></el-button>
					 -->
					 <!-- 微信 -->
					<el-popover
					  placement="top-start"
					  trigger="hover">
						<img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/wxewm.jpg"style="width: 18rem;height:18rem;box-shadow: none;"></img>
					  <!-- <></el-button> -->
					  <el-button slot="reference" style="border:1px white solid;margin-right: 0.525rem;width: 40px;height: 40px;border-radius: 50%;background-image: url(https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/wx.jpg);background-repeat: no-repeat;background-size: 100% 100%;"></el-button>
					  
					  
					  <!-- <el-button slot="reference" style="border:1px black solid;margin-top: 0.3125rem;margin-right: 0.525rem;width: 30px;height: 32px;background-image: url(/img/wx.jpg);background-repeat: no-repeat;background-size: 100% 100%;"></el-button> -->
					</el-popover>
				</div>
				<div>
					<el-collapse accordion>
						<el-collapse-item :title="item.title" :name="index" v-if="item.title" v-for="(item,index) in introduction.favorites"
						 :key="index">
							<div>{{ item.content }}</div>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
		</div>

</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		name: "Introduction",
		data() {
			return {
				// urlqq: '/img/qq.jpg',
				// srcListqq: [
				// 	'/img/qqewm.jpg',

				// ],
				// url: '/img/wx.jpg',
				// srcList: [
				// 	'/img/wxewm.jpg',
				// ],
				
			}
		},
		computed: {
			...mapState(['introduction'])
		},
		watch: {
			'introduction.rollText'() {
				if (this.introduction.rollText.length != 0) {
					//等待 id="rollText"的div加载完毕
					this.$nextTick(() => {
						this.rollText()
					})
				}
			}
		},
		methods: {
			open() {
			    this.$alert('<img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/wxewm.jpg"style="width: 28rem;height:28rem;box-shadow: none;"></img>', {
					showConfirmButton: false,
					closeOnClickModal:true,
					showClose:false,
					// center: true,
					// showCancelButton: true,
					// cancelButtonText: '取消',
					dangerouslyUseHTMLString: true
				});
			}
		}

	}
</script>

<style>
	img {
		box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
		/*考虑浏览器兼容性*/
		-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
		-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	}
	.el-collapse-item {
		padding-left: 15px;
		padding-right: 15px;
	}

	.el-collapse-item .el-collapse-item__content {
		padding-bottom: 10px;
	}
	

</style>
